<template>
    <div class="sidebar">
        <el-menu class="sidebar-el-menu" :default-active="onRoutes" :collapse="collapse" background-color="#324157" text-color="#bfcbd9" active-text-color="#20a0ff" unique-opened router>
            <template v-for="item in items">
                <template v-if="item.children">
                    <el-submenu :index="item.operName" :key="item.operName">
                        <template slot="title">
                            <i :class="item.icon"></i>
                            <span slot="title">{{$t(item.operName)}}</span>
                        </template>
                        <el-menu-item v-for="(child,i) in item.children" :key="i" :index="child.operName">
                            {{$t(child.operName)}}
                        </el-menu-item>
                    </el-submenu>
                </template>
                <template v-else>
                    <el-menu-item :index="item.operName" :key="item.operName">
                        <i :class="item.icon"></i>
                        <span slot="title">{{$t(item.operName)}}</span>
                    </el-menu-item>
                </template>
            </template>
        </el-menu>
    </div>
</template>

<script>
    import * as util from '../../assets/util.js';
    import * as params from '../../store/appServerParams.js'
    import bus from '../common/bus'
export default {

  data() {
    return {
      collapse: false,
      items: []
      // items: [
      //     {
      //         icon: 'el-icon-setting',
      //         index: 'dashboard',
      //         title: '系统首页'
      //     },
      //     {
      //         icon: 'el-icon-tickets',
      //         index: 'table',
      //         title: '基础表格'
      //     },
      //     {
      //         icon: 'el-icon-message',
      //         index: 'tabs',
      //         title: 'tab选项卡'
      //     },
      //     {
      //         icon: 'el-icon-date',
      //         index: '3',
      //         title: '表单相关',
      //         subs: [
      //             {
      //                 index: 'form',
      //                 title: '基本表单'
      //             },
      //             {
      //                 index: 'editor',
      //                 title: '富文本编辑器'
      //             },
      //             {
      //                 index: 'markdown',
      //                 title: 'markdown编辑器'
      //             },
      //             {
      //                 index: 'upload',
      //                 title: '文件上传'
      //             }
      //         ]
      //     },
      //     {
      //         icon: 'el-icon-star-on',
      //         index: 'charts',
      //         title: 'schart图表'
      //     },
      //     {
      //         icon: 'el-icon-rank',
      //         index: 'drag',
      //         title: '拖拽列表'
      //     },
      //     {
      //         icon: 'el-icon-warning',
      //         index: 'permission',
      //         title: '权限测试'
      //     },
      //       {
      //         icon: 'el-icon-edit-outline',
      //         index: 'drawChassis',
      //         title: '绘制机架'
      //     },
      //     {
      //         icon: 'el-icon-error',
      //         index: '404',
      //         title: '404页面'
      //     }
      // ]
    }
  },
  computed: {
    onRoutes() {
      return this.$route.path.replace('/', '')
    }
  },
  created() {
    // 通过 Event Bus 进行组件间通信，来折叠侧边栏
    bus.$on('collapse', msg => {
      this.collapse = msg
    })
    this.items = util.local(params.AUTH_MENU);
  },

}
</script>

<style scoped>
.sidebar {
  display: block;
  position: absolute;
  left: 0;
  top: 70px;
  bottom: 0;
  overflow-y: scroll;
}
.sidebar::-webkit-scrollbar {
  width: 0;
}
.sidebar-el-menu:not(.el-menu--collapse) {
  width: 250px;
}
.sidebar > ul {
  height: 100%;
}
</style>
